<template>
    <div class="login">
        <el-card class="box-card">
            <div slot="header" class="clearfix" style="text-align: center; color: #fff; font-size: 20px">
                <span>课程选课系统</span>
            </div>
            <el-form :model="form" :rules="rules" ref="loginForm">
                <el-form-item prop="username">
                    <el-input class="ipt1" v-model="form.username" placeholder="学号/工号/用户名"
                        prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input class="ipt1" v-model="form.password" placeholder="密码" type="password"
                        prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-radio-group v-model="form.userType">
                        <el-radio :label="1">学生</el-radio>
                        <el-radio :label="2">教师</el-radio>
                        <el-radio :label="3">教务管理员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 400px; margin-top: 15px; text-align: center;"
                        @click="submit">登录</el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </div>
</template>
<script>
import { login } from '@/api/user';
export default {
    data() {
        return {
            form: {
                username: '',
                password: '',
                userType: 3
            },
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        submit() {
            // 触发表单验证this.$refs["loginForm"]
            this.$refs['loginForm'].validate(flag => {
                if (flag) {
                    // 网络请求
                    login(this.form).then(res => {
                        // cookie的登录验证必须同一域名
                        // 通过vue 的反向代理来解决
                        if (res.data?.loggedIn) {
                            this.$message({
                                type: 'success',
                                message: '登录成功',
                            })
                            // 修改vuex中的登录表示
                            this.$store.commit('user/updateLoggedIn')
                            this.$store.commit('user/updateUserType', res.data.userType)
                            this.$store.commit('user/updatepermission',res.data.permission)
                            //    跳转
                            this.$router.push("/index", () => { })
                        }
                    }


                    )


                }
            })

        }
    }
}
</script>
<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../assets/123.jpg);
    background-repeat: no-repeat;
    background-size: cover;

    .box-card {
        width: 450px;
        height: 400px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .ipt1 {
        width: 400px;
        margin-top: 20px;
    }

    .xzk {
        margin-top: 40px;

    }
}
</style>
